<template>
  <div class="context_menu" :style="style" @mouseleave="mouseleave">
    <div class="contextmenu_item" @click="removeComponent">删除</div>
    <div class="contextmenu_item" @click="updateIndex('up')">上移</div>
    <div class="contextmenu_item" @click="updateIndex('down')">下移</div>
    <div class="contextmenu_item" @click="updateIndex('top')">置顶</div>
    <div class="contextmenu_item" @click="updateIndex('bottom')">置底</div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  computed: {
    //映射组件的状态
    ...mapState({
      contextMenu: (state) => state.contextMenu,
      activeComponent: (state) => state.activeComponent,
    }),

    //根据设置参数计算样式
    style() {
      let style = "";
      style += `top:${this.contextMenu.top - 2}px; left:${
        this.contextMenu.left - 5
      }px; display:${this.contextMenu.show ? "block" : "none"};`;
      return style;
    },
  },
  methods: {
    //删除当前组件
    removeComponent() {
      console.log(this.activeComponent);
      if (this.activeComponent && this.activeComponent.type !== "default") {
        this.deleteComponent(this.activeComponent);
      }
    },
    updateIndex(type) {
      if (this.activeComponent && this.activeComponent.type !== "default") {
        this.updateComponent({ component: this.activeComponent, type: type });
      }
    },
    mouseleave() {
      this.isShowContextMenu({ top: 0, left: 0, show: false });
    },
    ...mapMutations([
      "isShowContextMenu",
      "deleteComponent",
      "updateComponent",
    ]),
  },
};
</script>

<style lang="scss" scoped>
.context_menu {
  position: absolute;
  z-index: 1000;
  display: none;
  //   min-width: 1.2rem;
  //   padding: 0.05rem 0;
  //   font-size: 0.12rem;
  text-align: left;
  background-color: #fff;
  border: 0.1rem solid #ccc;
  border: 0.1rem solid rgba(0, 0, 0, 0.15);
  border-radius: 0.3rem;
  box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.175);
  background-clip: padding-box;

  .contextmenu_item {
    padding: 0.6rem;
    color: #333;
    cursor: pointer;
    transition: 0.1s;
    &:hover {
      color: #fff;
      text-decoration: none;
      outline: 0;
      background-color: #1593ff;
    }
  }
}
</style>